<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootstrap-table.css">

    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/bootstrap.js"></script>
    <script src="static/js/bootstrap-table.js"></script>
    <script src="static/js/bootstrap-table-zh-CN.js"></script>

</head>
<body>

<div class="col-lg-12" style="height: 80px;"></div>
<div class="col-lg-2"></div>
<div class="col-lg-8">
    <table id="table1"></table>
</div>
<div class="col-lg-2"></div>

</body>

<script>
    // $(function () {
    //     $("#table1").bootstrapTable({
    //         url: "/person/list", //请求数据
    //         pagination: "true", //启用分页
    //         sidePagination: "server", //后端分页
    //         columns: [ //绑定参数
    //             {
    //                 field: "pid",
    //                 title: "ID"
    //             },
    //             {
    //                 field: "name",
    //                 title: "姓名"
    //             },
    //             {
    //                 field: "age",
    //                 title: "年龄"
    //             }
    //         ]
    //     })
    // })

    $(function () {
        $("#table1").bootstrapTable({
            url: "/person/list", //请求数据
            pagination: "true", //启用分页
            sidePagination: "server", //后端分页
            sortName: "age",
            sortOrder: "desc",
            columns: [ //绑定参数
                {
                    field: "pid",
                    title: "ID"
                },
                {
                    field: "name",
                    title: "姓名"
                    // sortable: "true" //排序
                },
                {
                    field: "age",
                    title: "年龄",
                    sortable: "true"
                },
                {
                    field: "photo",
                    title: "头像",
                    formatter: function (value, row, index) { //格式化方法
                        var a = "<img style='height: 50px' width='50px' src='" + value + "'>";
                        return a;
                    }
                },
                {
                    field: "pid",
                    title: "操作",
                    formatter: function (value, row, index) {
                        var a = "<button class='btn btn-danger btn-sm' onclick='del(" + value + ");'>删除</button>"
                        return a;
                    }
                }
            ]
        })
    })

    function del(pid) {
        $.ajax({
            url: "/person/deleteById?pid=" + pid,

            success: function (rs) {
                $("#table1").bootstrapTable("refresh");//如果成功 刷新
            }
        })
    }
</script>
</html>